<script type="text/javascript" language="javascript" charset="utf-8">
$(".header-con li a").removeClass("open-menu");
$(".header-con li #statistical_datum").addClass("open-menu");
</script>
<div class="boxed clearfix">
  
  <%= hidden_field_tag 'studio_name', "#{@studio.present? ? @studio.name : '全部门店'}" %>

  <div class="common-tit">
    <h2>人资数据</h2>
    <span>数据统计 > 人资数据</span>
    <div class="cours-gbtn">
      <div id="studio_select" class="list-box">
        <div class="downbtn">
          <span>全部分店</span>
          <em></em>
        </div>
        <ul class="dropdown-menu">
          <li _studio_id="0">全部门店</li>
          <% current_company.studios.each do |studio| %>
            <li _studio_id="<%= studio.id%>"><%= studio.name%></li>
          <% end %>
        </ul>
      </div>
    </div>
  </div>
  <div class="global-data">
    <div class="com-statcon">
      <div class="com-statbox">
        <div class="com-statistics">
          <div>
            <h4><%= @resource.status_data["在职"] %></h4>
            <span>员工人数(人)</span>
          </div>
          <div>
            <h4><%= @resource.sex_data["男"] %></h4>
            <span>男性员工(人)</span>
          </div>
          <div>
            <h4><%= @resource.sex_data["女"] %></h4>
            <span>女性员工(人)</span>
          </div>
          <div>
            <h4><%= @resource.status_data["离职"] %></h4>
            <span>离职人数(人)</span>
          </div>
        </div>
        <div class="com-statistics">
          <div>
            <h4><%= @resource.position_data["市场总监"] %></h4>
            <span>市场总监(人)</span>
          </div>
          <div>
            <h4><%= @resource.position_data["运营总监"] %></h4>
            <span>运营总监(人)</span>
          </div>
          <div>
            <h4><%= @resource.position_data["产品总监"] %></h4>
            <span>产品总监(人)</span>
          </div>
          <div></div>
        </div>
        <div class="com-statistics">
          <div>
            <h4><%= @resource.position_data["市场专员"] %></h4>
            <span>市场专员(人)</span>
          </div>
          <div>
            <h4><%= @resource.position_data["服务顾问"] %></h4>
            <span>服务顾问(人)</span>
          </div>
          <div>
            <h4><%= @resource.position_data["前台"] %></h4>
            <span>前台(人)</span>
          </div>
          <div>
            <h4><%= @resource.position_data["导师"] %></h4>
            <span>导师(人)</span>
          </div>
        </div>
      </div>
    </div>
    <div class="pdata-box clearfix">
      <div id="reSex"></div>
      <div id="rePos"></div>
    </div>
  </div>
</div>
<script src="/assets/js/echarts.common.min.js"></script>
<script src="/assets/js/common-list.js"></script>
<script>
// 收入类型比
var myChart1 = echarts.init(document.getElementById('reSex'));
option1 = {
  title : {
    text: '性别比',
    x:'14%'
  },
  color : ['#3cf','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
  tooltip : {
    trigger: 'item',
    formatter: "{a} <br/>{b} : {c} ({d}%)"
  },
  legend: {
    x : 'center',
    y : 'bottom',
    data:['男性','女性']
  },
  toolbox: {
    show : true,
    feature : {
      mark : {show: true},
      // dataView : {show: true, readOnly: false},
      magicType : {
        show: true,
        type: ['pie', 'funnel']
      },
      // restore : {show: true},
      saveAsImage : {show: true}
    }
  },
  calculable : true,
  series : [
  {
    name:'半径模式',
    type:'pie',
    radius : [20, 140],
    center : ['50%', '50%'],
    roseType : 'radius',
    lableLine: {
      normal: {
        show: false
      },
      emphasis: {
        show: true
      }
    },
    data:[
    {value: <%= @resource.sex_data["男"] %>, name:'男性'},
    {value: <%= @resource.sex_data["女"] %>, name:'女性'}
    ]
  }
  ]
};
myChart1.setOption(option1);

//支出类型比
var myChart2 = echarts.init(document.getElementById('rePos'));
option2 = {
  title : {
    text: '离职比',
    x:'14%'
  },
  color : ['#3cf','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
  tooltip : {
    trigger: 'item',
    formatter: "{a} <br/>{b} : {c} ({d}%)"
  },
  legend: {
    x : 'center',
    y : 'bottom',
    data: <%== @resource.leave_position_data.keys.to_json %>
  },
  toolbox: {
    show : true,
    feature : {
      mark : {show: true},
      // dataView : {show: true, readOnly: false},
      magicType : {
        show: true,
        type: ['pie', 'funnel']
      },
      // restore : {show: true},
      saveAsImage : {show: true}
    }
  },
  calculable : true,
  series : [
  {
    name:'半径模式',
    type:'pie',
    radius : [20, 140],
    center : ['50%', '50%'],
    roseType : 'radius',
    lableLine: {
      normal: {
        show: false
      },
      emphasis: {
        show: true
      }
    },
    data: <%== @resource.leave_position_data.map{|i| {:name => i[0],:value => i[1]}}.to_json %>
  }
  ]
};
myChart2.setOption(option2);
</script>
